<template>
  <div>
    <ul>
      <li><el-input v-model="queryParams.id" placeholder="输入序号进行模糊查询"></el-input></li>
      <li><el-input v-model="queryParams.pointName" placeholder="输入点名进行模糊查询"></el-input></li>
<!--      <li><el-input v-model="queryParams.coordinateX" placeholder="输入坐标 X 进行模糊查询"></el-input></li>
      <li><el-input v-model="queryParams.coordinateY" placeholder="输入坐标 Y 进行模糊查询"></el-input></li>
      <li><el-input v-model="queryParams.elevationH" placeholder="输入高程进行模糊查询"></el-input></li>-->
      <li><el-input v-model="queryParams.description" placeholder="输入描述进行模糊查询"></el-input></li>
      <li><el-button type="primary" @click="fetchControlPoints" :loading="isLoading">查询</el-button></li>
      <li><el-button type="primary" @click="openAddDialog">添加控制点</el-button></li>
    </ul>
  </div>

  <el-table :data="controlPoints" stripe :loading="isLoading">
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="pointName" label="点名"></el-table-column>
    <el-table-column prop="coordinateX" label="坐标 X"></el-table-column>
    <el-table-column prop="coordinateY" label="坐标 Y"></el-table-column>
    <el-table-column prop="elevationH" label="高程 H"></el-table-column>
    <el-table-column prop="description" label="描述"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" size="small" @click="openEditDialog(scope.row)" :loading="isLoading">编辑</el-button>
        <el-button type="danger" size="small" @click="deleteControlPoint(scope.row.id)" :loading="isLoading">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页部分 -->
  <div class="flex justify-center mt-4">
    <el-button @click="prevPage" :disabled="current === 1 || isLoading">上一页</el-button>
    <span class="mx-2">{{ current }} / {{ totalPages }}</span>
    <span class="mx-2">总共{{ total }}个点</span>
    <el-button @click="nextPage" :disabled="current === totalPages || isLoading">下一页</el-button>
  </div>
  <!-- 弹出子组件 -->
  <ControlPointEdit ref="editRef" @getData="getData"/>
  <ControlPointAdd ref="addRef" @getData="getData"/>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElButton, ElMessage } from "element-plus";
import {delControlPointById, getControlPoints} from "@/apis/api_controlPoint.js";
import ControlPointEdit from "@/views/ControlPoint/components/ControlPointEdit.vue";
import ControlPointAdd from "@/views/ControlPoint/components/ControlPointAdd.vue";

//--------------分页条件查询--------------
const controlPoints = ref([]);
const current = ref(1);
const pageSize = ref(5);
const total = ref(0);
const totalPages = ref(0);
const queryParams = ref({
  id: "",
  pointName: "",
  coordinateX: "",
  coordinateY: "",
  elevationH: "",
  description: "",
});
const isLoading = ref(false);

// 过滤查询参数
const filterQueryParams = (params) => {
  const filteredParams = {};
  for (const [key, value] of Object.entries(params)) {
    if (value!== "") {
      filteredParams[key] = value;
    }
  }
  return filteredParams;
};

const getData = async () => {
  isLoading.value = true;
  try {
    const filteredParams = filterQueryParams(queryParams.value);
    const res = await getControlPoints(current.value, pageSize.value, filteredParams);

    controlPoints.value = res.data.records;
    current.value = res.data.current;
    total.value = res.data.total;
    totalPages.value = res.data.pages;
    console.log(res.data);
    ElMessage.info("数据已更新");

  } catch (error) {
    ElMessage.error("获取数据失败，请稍后重试");
    console.error(error);
  } finally {
    isLoading.value = false;
  }
};

onMounted(() => {
  getData();
});

/**
 * 上一页
 */
const prevPage = () => {
  if (current.value > 1) {
    current.value--;
    getData();
  }
};

/**
 * 下一页
 */
const nextPage = () => {
  if (current.value < totalPages.value) {
    current.value++;
    getData();
  }
};

//-------------打开子组件 添加或编辑-----------------
const addRef = ref(null);

/**
 * 添加控制点
 */
const openAddDialog = () => {
  console.log("打开添加对话框");
  addRef.value.openAddDialogVisible();

};
const editRef = ref(null);
/**
 * 打开编辑对话框
 */
const openEditDialog = (row) => {
  console.log("打开编辑对话框", row);
  editRef.value.openEditDialogVisible(row);
};

/**
 * 条件查询
 */
const fetchControlPoints = () => {
  current.value = 1; // 重置页码为 1
  getData();
};

/**
 * 删除控制点
 * @param {number} id - 要删除的控制点的 ID
 * @returns {Promise<void>}
 */
const deleteControlPoint = async (id) => {
  isLoading.value = true;
  try {
    const response = await delControlPointById(id)
    if (response.flag) {
      ElMessage.success("删除成功");
      getData(); // 重新获取数据
    } else {
      ElMessage.error("删除失败");
    }
  } catch (error) {
    ElMessage.error("删除失败，请稍后重试");
    console.error(error);
  } finally {
    isLoading.value = false;
  }
};
</script>

<style scoped>
ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
}
</style>